<template>
  <div class="Success_2">
    <div class="Success_1">
      <div class="Success_3">
        <el-row>
          <el-col :sm="12" :lg="23">
            <el-result icon="success"> </el-result>
          </el-col>
        </el-row>
        <div class="Success_4">恭喜您,投资成功！！！</div>
        <div class="Success_4">
          您将会在{{ now }}获得<span class="Success_span">{{ benefits }}</span
          >元收益
        </div>
        <div class="Success_tishi">将在{{count}}秒后，跳回投资页面</div>
        <div class="Success_4">
          <button class="Success_button" @click="Success_button2">
            继续投资
          </button>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
import Bottom from "../finance/Bottom.vue";
import moment from "moment";

export default {
  data() {
    return {
      now: null,
      benefits: null, //获利金额
      count:'',
    };
  },
  components: {
    Bottom,
  },
  methods: {
  countDown() {
      const TIME_COUNT = 5
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) { //限制倒计时区间
            this.count--
          } else {
            clearInterval(this.timer)   //删除定时器
            this.timer = null
            //跳转的页面写在此处
            this.$router.push('/Investment')
          }
        }, 1000)
      }
    },
    Success_button2() {
      this.$router.push({
        path: "Investment",
      });
    },
    getSignInformation4() {
      this.now = moment().add(1, "y").format("YYYY-MM-DD");
      this.benefits = this.$route.query.benefits;
    },
  },
  created() {
    this.getSignInformation4();
    this.countDown() // 倒计时
  },
};
</script>

<style>
.Success_tishi{
  float: left;
  font-size: 80%;
  margin-left: 142px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.Success_span {
  color: red;
  font-size: 120%;
}
.Success_button {
  width: 200px;
  height: 50px;
  color: #ffffff;
  background-color: red;
  border: 1px solid red;
  font-size: 100%;
  cursor: pointer;
}
.Success_4 {
  width: 100%;
  float: left;
  height: 50px;
  background-color: #fff;
  text-align: center;
  font-size: 150%;
}
.Success_3 {
  width: 40%;
  height: 90%;
  margin-left: 30%;
  float: left;
  /* background-color: red; */
}
.Success_1 {
  width: 80%;
  float: left;
  height: 500px;
  margin-left: 10%;
  margin-top: 150px;
  margin-bottom: 150px;
  background-color: #ffffff;
}
.Success_2 {
  float: left;
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}
</style>